<template>
	<view>
		<image class="logo ww100" src="@/static/image/fashi.jpg" mode="aspectFill"></image>
		<view class="tip white f28">义工招募</view>
		<view class="p20 f28 content">
			事无巨细，有益则行;力有大小，无私则成。但凡有求援手即伸。怀佛祖舍身之德，思菩萨慈悲之贤。心容天地，量括乾坤。积聚功德，遍施十方。诸方贤达，护法信众，善用尘劳，广启法门。凭佛之力，心愿达成，凡所行事，福慧双增。
			星辰照亮夜空而不求偿，大地承载万物而不图报，佛法度化群生而无界限... 慷慨其光芒，犹如大世间至善，义工为尊，恰似星辰，"地，慷慨其滋养。
		</view>
		<view class="tip white f28">加入要求</view>
		<view class="p20 f28 content">
			<view>1、18周岁-60周岁，具有相应民事行为能力，正知正信，身心健康，无传染病，无不良嗜好。</view>
			<view>2、自愿从事义务工作，服从寺院安排。</view>
			<view>3.自觉遵守寺院各项规章制度及相关义工管理制度。</view>
			<view>4、具有奉献、感恩、吃苦耐劳、持之以恒的精神。5、登记资料时请认真客观填写，以便了解您的特长及作上岗时间安排。</view>
		</view>
		<view class="tip white f28">如何加入</view>
		<view class="p20 f28 content">
			<view>1、按下列表单认真填写相关信息并在线提交。</view>
			<view>2、等待寺院义工服务部人力组致电核实与了解。</view>
			<view>3、录取后等待通知参加见面会。</view>
			<view>4、根据特长、意愿及发心时长等分配相应组别。</view>
			<view>5、岗位培训及实习。正式成为本寺义工。</view>
			<view>6、正式成为本寺义工。</view>
		</view>
		<view class="tip white f28">信息登记</view>
		<view class="content p20 mt40">
			<view class="item mb40">
				<view class="f32">姓名</view>
				<input class="mt20" type="text" v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="item mb40">
				<view class="f32">联系电话</view>
				<input class="mt20" type="tel" v-model="phone" :maxlength="11" placeholder="请输入联系电话" />
			</view>
			<view class="item mb40">
				<view class="f32">身份证号</view>
				<input class="mt20" type="idcard" v-model="card" placeholder="请输入身份证号" />
			</view>
			<view class="item mb40">
				<view class="f32">性别</view>
				<radio-group class="d-s-c mt20" @change="setAct('gIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in gender" :key="index">
						<radio :value="index" :checked="index == gIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">籍贯</view>
				<input class="mt20" v-model="city" type="text" placeholder="请输入籍贯" />
			</view>
			<view class="item mb40">
				<view class="f32">婚姻情况</view>
				<radio-group class="d-s-c mt20" @change="setAct('mIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in marr" :key="index">
						<radio :value="index" :checked="index == mIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">健康情况</view>
				<radio-group class="d-s-c mt20" @change="setAct('hIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in health" :key="index">
						<radio :value="index" :checked="index == hIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">有无传染病或特殊疾病</view>
				<radio-group class="d-s-c mt20" @change="setAct('dIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in disease" :key="index">
						<radio :value="index" :checked="index == dIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">学历</view>
				<radio-group class="d-s-c mt20" @change="setAct('cIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in culture" :key="index">
						<radio :value="index" :checked="index == cIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">工作状态</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('wIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in work" :key="index">
						<radio :value="index" :checked="index == wIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">技能专场（可多选）</view>
				<view class="d-s-c f-w mt20">
					<view class="f28 mb20 items tc" :class="item.check ? 'active' : ''" v-for="(item, index) in skill"
						:key="index" @click="setSkill(index)">{{ item.name }}</view>
				</view>
			</view>
			<view class="item mb40">
				<view class="f32">是否收戒</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('haIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in harvest" :key="index">
						<radio :value="index" :checked="index == haIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">义工经验</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('sIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in service" :key="index">
						<radio :value="index" :checked="index == sIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">可服务时间</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('tIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in time" :key="index">
						<radio :value="index" :checked="index == tIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">期望收获</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('gaIndex', $event)">
					<label class="ww100 d-s-c f28 mb20" v-for="(item, index) in gains" :key="index">
						<radio :value="index" :checked="index == gaIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<u-button text="马上提交" shape="circle" color="#DA2424" @click="send"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				name: '',
				phone: '',
				card: '',
				city: '',
				gender: ['男', '女'], //性别
				gIndex: -1, //性别下表
				marr: ['未婚', '已婚', '离异', '丧偶'], //婚姻情况
				mIndex: -1,
				health: ['健康', '一般'], //健康情况
				hIndex: 0,
				disease: ['有', '无'], //有无传染疾病
				dIndex: 0,
				culture: ['在校生', '已毕业', '无'], //文化程度
				cIndex: 0, //文化程度下标
				work: ['在职', '高职/退休', '自由职业', '无业/待业'], //工作状态
				wIndex: 0,
				skill: [
					//技能专长
					{
						name: '厨艺料理',
						check: true
					},
					{
						name: '裁缝裁剪',
						check: false
					},
					{
						name: '医疗护理',
						check: false
					},
					{
						name: '茶道花艺',
						check: false
					},
					{
						name: '图书馆里',
						check: false
					},
					{
						name: '其他',
						check: false
					}
				],
				harvest: ['已皈依', '已受五戒', '已受菩萨戒', '否'], //是否收戒
				haIndex: 0,
				service: ['有', '无'], //义工经验
				sIndex: 0,
				time: ['工作日', '周末', '随时'], //可服务时间
				tIndex: 0,
				gains: ['喜欢寺院的环境，身心清净净', '希望培植福根，祈望顺遂', '希望能够解决烦恼和困惑', '爱好公益，奉献精神，自利利他'], //期望收获
				gaIndex: 0
			};
		},
		methods: {
			async send() {
				if (this.name == '') return this.$showToast('请输入姓名');
				if (this.phone == '') return this.$showToast('请输入联系电话');
				if (this.card == '') return this.$showToast('请输入身份证号');
				if (this.city == '') return this.$showToast('请输入籍贯');
				if (!this.skill.some((item) => item.check)) return this.$showToast('请选择技能专场');
				const res = await this.$request({
					url: this.$api.recruit,
					data: {
						name: this.name, //姓名
						tel: this.phone, //电话
						card: this.card, //身份证
						native_place: this.city, //籍贯
						skill: this.skill.filter((item) => item.check).map((item) => item.name), //职业专长
						gander: this.gender[this.gIndex], //性别
						marriage: this.marr[this.mIndex], //婚姻情况
						health: this.health[this.hIndex], //健康
						disease: this.disease[this.dIndex], //传染病
						educational: this.culture[this.cIndex], //文化程度
						work: this.work[this.wIndex], //工作状态
						harvest: this.harvest[this.haIndex], //是否受戒
						service: this.service[this.sIndex], //义工经验
						time: this.time[this.tIndex], //服务时间
						expectation: this.gains[this.gaIndex] //期望收获
					}
				});
				uni.showToast({ icon: 'none', title: res.msg });
				if (res.code == 1) {
					setTimeout(() => uni.navigateBack(), 1000);
				}
			},
			setSkill(index) {
				this.skill[index].check = !this.skill[index].check;
			},
			setAct(name, e) {
				this[name] = e.detail.value;
				console.log(name, e);
			}
		},
		onLoad() {
			this.user = uni.getStorageSync("user");
			this.name = this.user.nickname
			this.phone = this.user.mobile
			this.card = this.user.card
			this.city = this.user.city
			this.gIndex = this.gender.findIndex(item => item == this.user.gender)
			this.mIndex = this.marr.findIndex(item => item == this.user.marr)
			this.hIndex = this.health.findIndex(item => item == this.user.health)
			this.dIndex = this.disease.findIndex(item => item == this.user.disease)
			this.cIndex = this.culture.findIndex(item => item == this.user.culture)
			this.wIndex = this.work.findIndex(item => item == this.user.work)
			this.haIndex = this.harvest.findIndex(item => item == this.user.harvest)
			this.sIndex = this.service.findIndex(item => item == this.user.service)
			this.tIndex = this.time.findIndex(item => item == this.user.time)
			this.gaIndex = this.gains.findIndex(item => item == this.user.gains)
			let list = this.user.skill.split(',')
			list.map(item => this.skill.findIndex(e => e.name == item ? e.check = true : null))
		},
	};
</script>

<style scoped lang="scss">
	.items {
		background-color: #eeeeee;
		color: #777777;
		margin: 10rpx;
		padding: 10rpx 20rpx;
		width: calc(25% - 20rpx);
	}

	.active {
		background-color: #ff7e11;
		color: #fff;
	}

	.logo {
		height: 400rpx;
	}

	.tip {
		background-color: #ff7e11;
		padding: 20rpx 30rpx;
	}

	.content {
		line-height: 46rpx;
	}

	.item {

		input,
		picker,
		.picker {
			background-color: #f7f7f7;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;

			.pickerView {
				height: 80rpx;
			}
		}
	}
</style>